<template>
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="6em">
        <el-row type="flex" :gutter="10">
            <el-col :span="24">
                <el-form-item label="上级菜单" prop="pid">
                    <el-cascader v-model="formData.pid" :options="menuData" :props="props"></el-cascader>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="规则类型" prop="type">
                    <el-radio-group v-model="formData.type">
                        <el-radio-button label="menu_dir">菜单目录</el-radio-button>
                        <el-radio-button label="menu">菜单项</el-radio-button>
                        <el-radio-button label="button">页面按钮</el-radio-button>
                    </el-radio-group>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="菜单标题" prop="title">
                    <el-input v-model="formData.title" placeholder="示例: 菜单管理" type="text"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="规则名称" prop="name">
                    <el-input v-model="formData.name" placeholder="示例: menu" type="text"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="规则路径" prop="path">
                    <el-input v-model="formData.path" placeholder="示例: /menu" type="text"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="菜单图标" prop="icon">
                    <e-icon-picker v-model="formData.icon"></e-icon-picker>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="菜单类型" prop="menu_type">
                    <el-select v-model="formData.menu_type">
                        <el-option label="内部跳转" value="tab"></el-option>
                        <el-option label="外部跳转" value="link"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="排序" prop="weigh">
                    <el-input v-model="formData.weigh" placeholder="示例: 1" type="text"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="缓存状态" prop="keepalive">
                    <el-switch v-model="formData.keepalive" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="启用状态" prop="status">
                    <el-switch v-model="formData.status" active-value="1" inactive-value="0"></el-switch>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-button type="primary" icon="el-icon-check" @click="onConfirm">完成({{ current + 1 }}/{{ selection.length }})</el-button>
            <el-button type="primary" icon="el-icon-close" @click="onCancel">取消</el-button>
        </el-row>
    </el-form>
</template>

<script>
import Vue from "vue";
import { post } from "@/assets/js/http.js";
import eIconPicker from "e-icon-picker";
import "e-icon-picker/lib/index.css";
Vue.use(eIconPicker, {
    FontAwesome: true,
    zIndex: 3100
});

export default {
    name: "menu-edit",
    props: {
        menuData: {
            type: Array,
            default: () => []
        },
        selection: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        selection() {
            this.setFormData();
        }
    },
    mounted() {
        this.setFormData();
    },
    data() {
        return {
            current: 0,
            props: {
                label: "title",
                value: "id",
                children: "children",
                checkStrictly: true
            },
            formData: {
                pid: "",
                type: "",
                title: "",
                name: "",
                path: "",
                icon: "",
                menu_type: "",
                weigh: "",
                keepalive: "",
                status: "1"
            },
            formRules: {
                weigh: [
                    {
                        pattern: /^[1-9]\d*$/,
                        message: "请输入正整数"
                    }
                ],
                type: {
                    required: true,
                    message: "此项为必填项"
                },
                title: {
                    required: true,
                    message: "此项为必填项"
                },
                name: {
                    required: true,
                    message: "此项为必填项"
                },
                icon: {
                    required: true,
                    message: "此项为必填项"
                }
            }
        };
    },
    methods: {
        setFormData() {
            if (this.selection.length > 0) {
                const data = this.selection[this.current];
                this.formData.id = data.id;
                this.formData.pid = data.pid;
                this.formData.type = data.type;
                this.formData.title = data.title;
                this.formData.name = data.name;
                this.formData.path = data.path;
                this.formData.icon = data.icon;
                this.formData.menu_type = data.menu_type;
                this.formData.weigh = data.weigh;
                this.formData.keepalive = data.keepalive;
                this.formData.status = data.status;
            }
        },
        onConfirm() {
            this.$refs.formRef.validate(async isValid => {
                if (isValid) {
                    const formData = JSON.parse(JSON.stringify(this.formData));
                    if (Array.isArray(formData.pid)) {
                        formData.pid = formData.pid[formData.pid.length - 1];
                    }
                    await post({
                        url: "/admin/auth.menu/edit",
                        data: formData,
                        loading: true,
                        successTip: true
                    });
                    if (this.current === this.selection.length - 1) {
                        this.$emit("update");
                        this.$parent.$emit("update:visible", false);
                        this.$refs.formRef.resetFields();
                    } else {
                        this.current += 1;
                        this.setFormData();
                    }
                }
            });
        },
        onCancel() {
            if (this.current > 0) {
                this.$emit("update");
            }
            this.$parent.$emit("update:visible", false);
            this.$refs.formRef.resetFields();
        }
    }
};
</script>